<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- 把组件当成标签来使用 -->
			<hello-world></hello-world>
			<hello-world />
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			Vue.component('hello-world', {
				// 1. data 必须是一个函数
				data: function () {
					// 在 data 函数内部，必须 return 一个对象，对象里面是当前组件私有的数据
					return {
						name: 'Tom',
						age: 18,
					}
				},
				// 2. 模板必须使用一个根元素进行包裹，有且只有一个
				// 3. 可以在模板字符串中定义页面的结构，使结构看起来更加清晰
				template: `
          <div>
            <p><button @click="add">按钮</button></p>
				    <p>{{name}}</p>
				    <p>{{age}}</p>
          </div>
        `,
				methods: {
					add() {
						this.age++
					},
				},
			})
			// vue 实例化之后，接管了一个区域，这个区域就是最顶级的父元素，
			// 所以也叫根元素，也叫根组件
			var vm = new Vue({
				el: '#app',
				data: {},
			})
		</script>
	</body>
</html>
